<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音双色球抽奖系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FE2C55', // 抖音红色
                        secondary: '#000000',
                        ballRed: '#E63946',
                        ballBlue: '#1D3557',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .ball-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 
                            inset 0 -3px 7px -1px rgba(0, 0, 0, 0.2);
            }
            .btn-shadow {
                box-shadow: 0 10px 15px -3px rgba(254, 44, 85, 0.4), 
                            0 4px 6px -2px rgba(254, 44, 85, 0.2);
            }
            .animate-bounce-custom {
                animation: bounce-custom 1s infinite;
            }
            @keyframes bounce-custom {
                0%, 100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-10px);
                }
            }
            .animate-spin-slow {
                animation: spin 3s linear infinite;
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen font-sans text-white overflow-x-hidden">
    <!-- 顶部标题区域 -->
    <header class="relative py-6 px-4 text-center overflow-hidden">
        <div class="absolute inset-0 bg-primary/10 -rotate-3 transform origin-top-left"></div>
        <div class="absolute inset-0 bg-primary/5 rotate-3 transform origin-top-right"></div>
        
        <div class="relative z-10">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-pink-400 mb-2">
                双色球抽奖
            </h1>
            <p class="text-gray-300 text-[clamp(1rem,2vw,1.2rem)] max-w-md mx-auto">
                点击开始按钮，体验真实的双色球抽奖过程
            </p>
        </div>
        
        <!-- 装饰元素 -->
        <div class="absolute -top-10 -left-10 w-20 h-20 bg-primary/20 rounded-full blur-xl"></div>
        <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-primary/20 rounded-full blur-xl"></div>
    </header>

    <main class="container mx-auto px-4 py-8 relative">
        <!-- 规则说明卡片 -->
        <div class="bg-gray-800/60 backdrop-blur-sm rounded-xl p-4 mb-8 border border-gray-700 shadow-lg max-w-2xl mx-auto">
            <h2 class="text-xl font-semibold text-primary mb-2 flex items-center">
                <i class="fa fa-info-circle mr-2"></i> 抽奖规则
            </h2>
            <ul class="text-gray-300 space-y-1 text-sm md:text-base">
                <li class="flex items-start">
                    <i class="fa fa-circle text-xs text-ballRed mt-1.5 mr-2"></i>
                    <span>从1-33的红球中随机抽取6个不重复号码</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-circle text-xs text-ballBlue mt-1.5 mr-2"></i>
                    <span>从1-16的蓝球中随机抽取1个号码</span>
                </li>
            </ul>
        </div>
        
        <!-- 号码球展示区域 -->
        <div class="mb-12">
            <h2 class="text-center text-xl font-semibold mb-6 text-gray-200">抽奖结果</h2>
            
            <div class="flex flex-col items-center">
                <!-- 红球区域 -->
                <div class="flex justify-center flex-wrap gap-4 mb-6" id="redBallsContainer">
                    <!-- 红球将通过JS动态生成 -->
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/50 flex items-center justify-center ball-shadow animate-pulse-slow"></div>
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/50 flex items-center justify-center ball-shadow animate-pulse-slow" style="animation-delay: 0.2s"></div>
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/50 flex items-center justify-center ball-shadow animate-pulse-slow" style="animation-delay: 0.4s"></div>
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/50 flex items-center justify-center ball-shadow animate-pulse-slow" style="animation-delay: 0.6s"></div>
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/50 flex items-center justify-center ball-shadow animate-pulse-slow" style="animation-delay: 0.8s"></div>
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/50 flex items-center justify-center ball-shadow animate-pulse-slow" style="animation-delay: 1s"></div>
                </div>
                
                <!-- 蓝球区域 -->
                <div class="flex justify-center" id="blueBallContainer">
                    <!-- 蓝球将通过JS动态生成 -->
                    <div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/50 flex items-center justify-center ball-shadow animate-pulse-slow" style="animation-delay: 1.2s"></div>
                </div>
            </div>
        </div>
        
        <!-- 控制按钮 -->
        <div class="text-center mb-10">
            <button id="drawButton" class="bg-primary hover:bg-primary/90 text-white font-bold py-4 px-10 rounded-full text-lg transform transition-all duration-300 hover:scale-105 active:scale-95 btn-shadow flex items-center justify-center mx-auto">
                <i class="fa fa-play-circle mr-2"></i> 开始抽奖
            </button>
            <p id="statusText" class="mt-4 text-gray-400 h-6"></p>
        </div>
        
        <!-- 历史记录 -->
        <div class="max-w-2xl mx-auto bg-gray-800/40 backdrop-blur-sm rounded-xl p-5 border border-gray-700">
            <h2 class="text-xl font-semibold mb-4 text-gray-200 flex items-center">
                <i class="fa fa-history mr-2 text-primary"></i> 历史记录
            </h2>
            <div id="historyContainer" class="space-y-3 max-h-40 overflow-y-auto pr-2">
                <p class="text-gray-400 text-center italic">暂无抽奖记录</p>
            </div>
        </div>
    </main>
    
    <footer class="mt-12 py-6 text-center text-gray-500 text-sm">
        <p>本系统仅用于娱乐，与官方彩票无关</p>
    </footer>

    <script>
        // 全局变量
        let isDrawing = false;
        const redBallsContainer = document.getElementById('redBallsContainer');
        const blueBallContainer = document.getElementById('blueBallContainer');
        const drawButton = document.getElementById('drawButton');
        const statusText = document.getElementById('statusText');
        const historyContainer = document.getElementById('historyContainer');
        
        // 初始化页面
        function init() {
            drawButton.addEventListener('click', startDraw);
            loadHistory();
        }
        
        // 生成随机数（min到max之间的整数，包含min和max）
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        
        // 生成不重复的随机数数组
        function generateUniqueNumbers(count, min, max) {
            const numbers = [];
            while (numbers.length < count) {
                const num = getRandomNumber(min, max);
                if (!numbers.includes(num)) {
                    numbers.push(num);
                }
            }
            return numbers.sort((a, b) => a - b);
        }
        
        // 创建球元素
        function createBall(number, isRed = true) {
            const ball = document.createElement('div');
            const sizeClass = 'w-14 h-14 md:w-16 md:h-16';
            const colorClass = isRed ? 'bg-ballRed' : 'bg-ballBlue';
            
            ball.className = `${sizeClass} rounded-full ${colorClass} text-white font-bold flex items-center justify-center ball-shadow transform transition-all duration-500 scale-0`;
            ball.textContent = number < 10 ? `0${number}` : number;
            
            // 添加到DOM后触发动画
            setTimeout(() => {
                ball.classList.remove('scale-0');
                ball.classList.add('scale-100');
            }, 50);
            
            return ball;
        }
        
        // 清空球容器
        function clearBalls() {
            redBallsContainer.innerHTML = '';
            blueBallContainer.innerHTML = '';
        }
        
        // 开始抽奖动画
        async function startDraw() {
            if (isDrawing) return;
            
            isDrawing = true;
            drawButton.disabled = true;
            drawButton.classList.add('opacity-70', 'cursor-not-allowed');
            drawButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 抽奖中...';
            statusText.textContent = '正在抽取幸运号码...';
            
            clearBalls();
            
            // 生成红球号码
            const redNumbers = generateUniqueNumbers(6, 1, 33);
            // 生成蓝球号码
            const blueNumber = getRandomNumber(1, 16);
            
            // 逐个显示红球，带有延迟效果
            for (let i = 0; i < redNumbers.length; i++) {
                await new Promise(resolve => setTimeout(resolve, 800));
                
                // 创建临时旋转动画的球
                const tempBall = document.createElement('div');
                tempBall.className = 'w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/70 flex items-center justify-center ball-shadow animate-spin-slow';
                redBallsContainer.appendChild(tempBall);
                
                // 短暂延迟后替换为实际号码球
                await new Promise(resolve => setTimeout(resolve, 500));
                redBallsContainer.removeChild(tempBall);
                
                const ball = createBall(redNumbers[i], true);
                redBallsContainer.appendChild(ball);
            }
            
            // 延迟后显示蓝球
            await new Promise(resolve => setTimeout(resolve, 1000));
            statusText.textContent = '正在抽取蓝球...';
            
            // 创建临时旋转动画的蓝球
            const tempBlueBall = document.createElement('div');
            tempBlueBall.className = 'w-14 h-14 md:w-16 md:h-16 rounded-full bg-gray-700/70 flex items-center justify-center ball-shadow animate-spin-slow';
            blueBallContainer.appendChild(tempBlueBall);
            
            // 短暂延迟后替换为实际号码球
            await new Promise(resolve => setTimeout(resolve, 800));
            blueBallContainer.removeChild(tempBlueBall);
            
            const blueBall = createBall(blueNumber, false);
            blueBallContainer.appendChild(blueBall);
            
            // 完成抽奖
            await new Promise(resolve => setTimeout(resolve, 500));
            statusText.textContent = '抽奖完成！祝您好运！';
            
            // 保存到历史记录
            saveToHistory(redNumbers, blueNumber);
            
            // 恢复按钮状态
            drawButton.disabled = false;
            drawButton.classList.remove('opacity-70', 'cursor-not-allowed');
            drawButton.innerHTML = '<i class="fa fa-refresh mr-2"></i> 再抽一次';
            isDrawing = false;
        }
        
        // 保存到历史记录
        function saveToHistory(redNumbers, blueNumber) {
            // 格式化日期时间
            const now = new Date();
            const timeStr = now.toLocaleString('zh-CN', {
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
            
            // 创建历史记录项
            const historyItem = document.createElement('div');
            historyItem.className = 'flex items-center justify-between p-2 bg-gray-700/30 rounded-lg transform transition-all duration-300 hover:bg-gray-700/50';
            
            // 红球部分
            const redBallsHtml = redNumbers.map(num => 
                `<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-ballRed text-white text-xs mr-1">${num < 10 ? '0' + num : num}</span>`
            ).join('');
            
            // 蓝球部分
            const blueBallHtml = `<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-ballBlue text-white text-xs">${blueNumber < 10 ? '0' + blueNumber : blueNumber}</span>`;
            
            historyItem.innerHTML = `
                <div class="flex items-center">
                    ${redBallsHtml}
                    <span class="mx-1 text-gray-500">+</span>
                    ${blueBallHtml}
                </div>
                <span class="text-gray-400 text-xs">${timeStr}</span>
            `;
            
            // 添加到历史记录容器顶部
            if (historyContainer.querySelector('p.italic')) {
                historyContainer.innerHTML = '';
            }
            historyContainer.insertBefore(historyItem, historyContainer.firstChild);
            
            // 保存到本地存储
            const history = JSON.parse(localStorage.getItem('lotteryHistory') || '[]');
            history.unshift({
                red: redNumbers,
                blue: blueNumber,
                time: now.getTime()
            });
            
            // 限制历史记录数量为10条
            if (history.length > 10) {
                history.pop();
            }
            
            localStorage.setItem('lotteryHistory', JSON.stringify(history));
        }
        
        // 加载历史记录
        function loadHistory() {
            const history = JSON.parse(localStorage.getItem('lotteryHistory') || '[]');
            
            if (history.length === 0) {
                return;
            }
            
            // 清空"暂无记录"提示
            historyContainer.innerHTML = '';
            
            // 加载每条记录
            history.forEach(item => {
                const date = new Date(item.time);
                const timeStr = date.toLocaleString('zh-CN', {
                    month: 'short',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
                
                const historyItem = document.createElement('div');
                historyItem.className = 'flex items-center justify-between p-2 bg-gray-700/30 rounded-lg transform transition-all duration-300 hover:bg-gray-700/50';
                
                const redBallsHtml = item.red.map(num => 
                    `<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-ballRed text-white text-xs mr-1">${num < 10 ? '0' + num : num}</span>`
                ).join('');
                
                const blueBallHtml = `<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-ballBlue text-white text-xs">${item.blue < 10 ? '0' + item.blue : item.blue}</span>`;
                
                historyItem.innerHTML = `
                    <div class="flex items-center">
                        ${redBallsHtml}
                        <span class="mx-1 text-gray-500">+</span>
                        ${blueBallHtml}
                    </div>
                    <span class="text-gray-400 text-xs">${timeStr}</span>
                `;
                
                historyContainer.appendChild(historyItem);
            });
        }
        
        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
